<template>
  <div class="app">
    <div class="commentbar">
      <h5>发表评论</h5>
      <van-divider :style="{  borderColor: '#333'}"></van-divider>
      <textarea style="resize:none" v-model="content"></textarea>
      <van-button type="info" block @click="addcomment">发表评论</van-button>
      <div class="connects" v-for="(item, i) in commectusers" :key="i">
        <div>第{{i + 1}}楼 用户:{{item.user_name}} 发表时间：{{item.add_time.split('T')[0]}}</div>
        <div>{{item.content}}</div>
      </div>
      <van-button plain type="primary" @click="getuserComment">加载更多</van-button>
    </div>
  </div>
</template>
<script>
export default {
  props: [],
  data() {
    return {
      content:'',
      commectusers:[],
      pageindex: 1
    }
  },
  created () {
    this.getuserelement()
  },
  methods: {
    async getuserelement() {
      var id = window.localStorage.getItem('id')
      const { data: res } = await this.$http.get('/api/getcomments/' + id + '?pageindex=' + this.pageindex)
    //   console.log(res)
      this.commectusers = res.message
    },
    async getuserComment() {
      this.pageindex++
      var id = window.localStorage.getItem('id')
      const { data: res } = await this.$http.get('/api/getcomments/' + id + '?pageindex=' + this.pageindex)
      this.commectusers.push(...res.message)
    },
    async addcomment() {
      var id = window.localStorage.getItem('id')
       if (this.content.trim() === '') {
         return this.$toast('请输入内容后再提交')
       }
        const { data: res } = await this.$http.post('/api/postcomment/' + id, {
           content: this.content
       })
       console.log(res)
       this.getuserelement()
       this.content = ''
    }
  }
}
</script>
<style scoped lang="less">
.commentbar {
  padding: 0 5px;
  margin-bottom: 200px;
  margin-top: 60px;
  h5 {
    font-size: 18px;
  }
  textarea {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border-color: #ccc;
  }
  .connects div {
    background-color: #ccc;
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
  }
  .connects div:nth-child(2) {
    background-color: #fff;
    padding: 0 30px;
  }
  .van-button:nth-of-type(2) {
    width: 100%;
    height: 100%;
    color: #f44;
    border-color : #f44;
  }
}
</style>
